import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

// 天气图标组件
// 根据和风天气API的图标代码显示对应的图标
const WeatherIcon = ({ code, size = 40 }) => {
  // 根据天气代码返回对应的Ionicons图标名称
  const getIconName = (code) => {
    // 将代码转为数字
    const codeNum = parseInt(code);
    
    // 晴
    if (codeNum === 100) {
      return 'sunny';
    }
    // 多云
    else if (codeNum >= 101 && codeNum <= 103) {
      return 'partly-sunny';
    }
    // 阴
    else if (codeNum === 104) {
      return 'cloud';
    }
    // 雾、霾等
    else if (codeNum >= 500 && codeNum <= 515) {
      return 'water';
    }
    // 小雨、中雨
    else if (codeNum >= 300 && codeNum <= 306) {
      return 'rainy';
    }
    // 大雨、暴雨
    else if (codeNum >= 307 && codeNum <= 312) {
      return 'thunderstorm';
    }
    // 雨夹雪
    else if (codeNum >= 313 && codeNum <= 318) {
      return 'snow';
    }
    // 雪
    else if (codeNum >= 400 && codeNum <= 407) {
      return 'snow';
    }
    // 默认
    return 'cloud';
  };

  // 获取图标颜色
  const getIconColor = (code) => {
    const codeNum = parseInt(code);
    
    // 晴
    if (codeNum === 100) {
      return '#FFD700'; // 金色
    }
    // 多云
    else if (codeNum >= 101 && codeNum <= 103) {
      return '#87CEEB'; // 天蓝色
    }
    // 阴
    else if (codeNum === 104) {
      return '#A9A9A9'; // 深灰色
    }
    // 雾、霾等
    else if (codeNum >= 500 && codeNum <= 515) {
      return '#D3D3D3'; // 浅灰色
    }
    // 小雨、中雨
    else if (codeNum >= 300 && codeNum <= 306) {
      return '#4682B4'; // 钢蓝色
    }
    // 大雨、暴雨
    else if (codeNum >= 307 && codeNum <= 312) {
      return '#4169E1'; // 皇家蓝
    }
    // 雨夹雪
    else if (codeNum >= 313 && codeNum <= 318) {
      return '#B0C4DE'; // 淡钢蓝
    }
    // 雪
    else if (codeNum >= 400 && codeNum <= 407) {
      return '#F0F8FF'; // 爱丽丝蓝
    }
    // 默认
    return '#FFFFFF'; // 白色
  };

  const iconName = getIconName(code);
  const iconColor = getIconColor(code);

  return (
    <View style={styles.container}>
      <Ionicons name={iconName} size={size} color={iconColor} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  }
});

export default WeatherIcon;